<template>
  <div class="company-report">
    <h1>孵化器季度情况监测表</h1>

    <el-form
        ref="ruleFormRef"
        :model="form"
        :rules="formRules"
        label-width="240px"
        style="max-width: 1000px; width: 100%"
    >
      <!-- 企业名称 -->
      <el-card>
        <template #header>
          <div class="header">企业基本信息</div>
        </template>
        <el-form-item label="企业名称" prop="companyName">
          <el-input v-model="form.companyName" placeholder="请输入企业名称" />
        </el-form-item>
      </el-card>

      <!-- 季报核心数据 -->
      <el-card>
        <template #header>
          <div class="header">季度核心指标</div>
        </template>

        <el-form-item label="本季度在孵企业获得投融资总额（千元）" prop="currentFinance">
          <el-input-number
              v-model="form.currentFinance"
              :min="0"
              placeholder="请输入金额"
          />
        </el-form-item>

        <el-form-item label="在孵企业从业人员数量（人）" prop="employees">
          <el-input-number
              v-model="form.employees"
              :min="0"
              placeholder="请输入人数"
          />
        </el-form-item>

        <el-form-item label="其中：吸纳应届大学毕业生数量（人）" prop="freshGraduates">
          <el-input-number
              v-model="form.freshGraduates"
              :min="0"
              placeholder="请输入人数"
          />
        </el-form-item>

        <el-form-item label="是否为教师创办企业" prop="teacherFounded">
          <el-radio-group v-model="form.teacherFounded">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="是否为大学生创办企业" prop="studentFounded">
          <el-radio-group v-model="form.studentFounded">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="成果转化总数（个）" prop="transferCount">
          <el-input-number
              v-model="form.transferCount"
              :min="0"
              placeholder="请输入个数"
          />
        </el-form-item>

        <el-form-item label="其中：依托高校数量（个）" prop="universityCount">
          <el-input-number
              v-model="form.universityCount"
              :min="0"
              placeholder="请输入个数"
          />
        </el-form-item>

        <el-form-item label="产出成果数（个）" prop="outputCount">
          <el-input-number
              v-model="form.outputCount"
              :min="0"
              placeholder="请输入个数"
          />
        </el-form-item>

        <el-form-item label="本季度专利申请数（件）" prop="patentApply">
          <el-input-number
              v-model="form.patentApply"
              :min="0"
              placeholder="请输入件数"
          />
        </el-form-item>

        <el-form-item label="其中：发明专利（件）" prop="inventionApply">
          <el-input-number
              v-model="form.inventionApply"
              :min="0"
              placeholder="请输入件数"
          />
        </el-form-item>

        <el-form-item label="企业所拥有有效知识产权数（件）" prop="validIp">
          <el-input-number
              v-model="form.validIp"
              :min="0"
              placeholder="请输入件数"
          />
        </el-form-item>

        <el-form-item label="其中：发明专利（件）" prop="validInvention">
          <el-input-number
              v-model="form.validInvention"
              :min="0"
              placeholder="请输入件数"
          />
        </el-form-item>
      </el-card>

      <!-- 指标解释 -->
      <el-card>
        <template #header>
          <div class="header">指标解释</div>
        </template>
        <ul>
          <li>
            <b>教师企业：</b
            >指报告期末，大学科技园中的在孵企业依托高等院校教师创办的企业。
          </li>
          <li>
            <b>大学生创业企业：</b
            >大学生创业企业是指由大学生独自创办或大学生团队合作创办的科技型小企业，具备独立企业法人资格；大学生本人应是本企业的专职人员，负责本企业主要的技术研发或经营管理，承担主要职责。其中，大学生是指高等院校在读或毕业未超过二年的大学生、研究生。
          </li>
          <li>
            <b>在孵企业获得投融资总额：</b
            >报告期内，在孵企业获得各类投融资（包括种子基金、天使投资、A轮融资、B轮融资、C轮融资、新三板或上市、银行信贷、担保等）的总额。
          </li>
          <li>
            <b>在孵企业从业人员数量：</b
            >指报告期末，在在孵企业工作的各类人员数量总和。
          </li>
          <li>
            <b>吸纳应届大学毕业生：</b
            >报告期内，在孵企业内聘用的应届大专以上学历的人员总数。
          </li>
          <li>
            <b>成果转化总数：</b
            >指报告期末，大学科技园中转化的科技成果总数。
          </li>
          <li>
            <b>产出成果数：</b
            >指报告期末，大学科技园中的在孵企业从事基础研究、应用研究、试验发展取得成果数目。
          </li>
          <li>
            <b>专利申请数：</b
            >指报告期内，在孵企业向专利行政部门提出专利申请并被受理的件数。
          </li>
          <li>
            <b>拥有有效知识产权数：</b
            >指报告期末，在孵企业拥有国内外知识产权行政部门授权在有效期内的各类知识产权的总数。
          </li>
        </ul>
      </el-card>

      <!-- 按钮 -->
      <el-form-item style="text-align: center">
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="saveDraft">保存草稿</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus';
import {AddDataHatchQuarter, UpdataUserDataHatchQuarter, GetDataHatchQuarterid} from '@/api/enterpeise';
import { getLoginUserId } from '@/utils/storage';
import { useRoute } from 'vue-router';
import router from "@/router";
const route = useRoute();
const ruleFormRef = ref<FormInstance>();
const isSubmit = ref(false);
const totalRecord = ref(0);


const form = reactive({
  userId: getLoginUserId(), // 自动填充当前登录用户ID
  status: 0, // 默认状态为保存
  companyName: '',
  currentFinance: 0,
  employees: 0,
  freshGraduates: 0,
  teacherFounded: 0,
  studentFounded: 0,
  transferCount: 0,
  universityCount: 0,
  outputCount: 0,
  patentApply: 0,
  inventionApply: 0,
  validIp: 0,
  validInvention: 0,
});

const formRules = reactive<FormRules>({
  companyName: [{ required: true, trigger: 'blur', message: '请输入企业名称' }],
});

// 获取用户未提交的报表数据
const getUserDraft = async (id: number)=> {
  try{
    const res = await GetDataHatchQuarterid(id);
    if (res.code === 200) {
      console.log(res.data);
      Object.assign(form, res.data);
    }
  } catch (error) {
    console.error('获取报表数据失败:', error);
    ElMessage.error('获取报表数据失败');
  }
};

// 提交表单
const submitForm = async () => {
  if (!ruleFormRef.value) return;



  await ruleFormRef.value.validate(async (valid: boolean) => {
    if (valid) {
      try {
        let response;
        form.status = 1; // 设置状态为提交
        if (totalRecord.value === 1) {
          // 如果存在未提交记录，则调用更新接口
          response = await UpdataUserDataHatchQuarter(form);
        } else {
          // 否则调用添加接口
          response = await AddDataHatchQuarter(form);
        }

        if (response.code === 200) {
          ElMessage.success('提交成功');
          isSubmit.value = true;
          router.push(`/personal-center/fill-information/my-datafrom`);
        }
      } catch (error) {
        console.error('提交失败:', error);
        ElMessage.error('提交失败');
        router.push(`/personal-center/fill-information/my-datafrom`);
      }
    } else {
      ElMessage.warning('表单没有填写完整');
    }
  });
};

// 保存草稿
const saveDraft = async () => {
  if (!ruleFormRef.value) return;

  form.status = 0; // 设置状态为保存
  console.log(form);
  try {
    let response;
    if (totalRecord.value === 1) {
      // 如果存在未提交记录，则调用更新接口
      response = await UpdataUserDataHatchQuarter(form);
    } else {
      // 否则调用添加接口
      response = await AddDataHatchQuarter(form);
    }

    if (response.code === 200) {
      ElMessage.success('草稿保存成功');
      isSubmit.value = false;
    } else {
      ElMessage.error('保存失败');
    }
  } catch (error) {
    console.error('保存失败:', error);
    ElMessage.error('保存失败');
  }
};

// 重置表单
const resetForm = () => {
  ruleFormRef.value?.resetFields();
  isSubmit.value = false;
};

onMounted(() => {
  const id = route.query.id;
  if (id) {
    totalRecord.value = 1;
    getUserDraft(Number(id)); // 页面加载时获取需要的报表数据
  }
});
</script>

<style lang="scss" scoped>
.header {
  font-weight: bold;
  font-size: 20px;
  margin-bottom: 20px;
}
.el-card {
  margin: 20px auto;
}
.company-report {
  width: 100%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: bold;

  :deep(.el-form-item__label) {
    font-weight: bold;
  }

  :deep(.el-table th, .el-table td) {
    font-weight: bold;
  }
}
</style>
